<template>
  <div class="song">
    <div class="content ww">
      <!-- 左边 -->
      <div class="content-l">
        <div class="content-l-l">
          <img :src="cover">
          <span></span>
        </div>
        <div class="content-l-r">
          <div class="top">
            <i></i>
            <div class="name">{{ songData.songName }}</div>
          </div>
          <p class="singer">
            <span>歌手：{{ songData.composer }}</span>
          </p>
          <!-- <p class="album">
            <span>所属专辑：{{ alubumMessage.album.albumName }}</span>
          </p> -->
          <div class="a-list">
            <router-link to='javascript:;' class="one">
              <span><i></i>播放</span>
            </router-link>
            <router-link to='javascript:;' class="two"></router-link>
            <router-link to='javascript:;' class="three">
              <span>收藏</span>
            </router-link>
            <router-link to='javascript:;' class="four">
              <span>分享</span>
            </router-link>
            <router-link to='javascript:;' class="five">
              <span>下载</span>
            </router-link>
            <router-link to='javascript:;' class="six">
              <span>(2462)</span>
            </router-link>
          </div>
          <div class="lyric">
            <div class="show" v-html="songData.songLyrics"></div>
            <!-- <div class="hide" v-show="showLyric" v-html="songData.hideLyric"></div> -->
            <!-- <div class="crl" @click="showLyricFunc()">
              <a href="javascript:;">{{ showText == 'show' ? '展开' : '收起' }}<i id="show-icon"></i></a>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 右边栏 -->
      <UserInfo></UserInfo>
    </div>
    <div class="songPlay">
      <audio src="./mp3/music1.mp3" controls="controls" autoplay='autoplay'></audio>
    </div>
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo'
import { reqSongById } from '@/api/index'
export default {
  components:{ UserInfo },
  data() {
    return {
      cover: 'http://p2.music.126.net/DESxmcxT42-KrVQvi0dEMQ==/109951163903245533.jpg?param=130y130',
      songData: {},
      showLyric: false,
      showText: 'show',
      songId: '',
    }
  },
  methods: {
    showLyricFunc() {
      if (this.showText == 'show') {
        this.showText = 'hide'
        document.getElementById('show-icon').style.backgroundPositionX = '-45px'
      } else {
        this.showText = 'show'
        document.getElementById('show-icon').style.backgroundPositionX = '-65px'
      }
      this.showLyric = !this.showLyric
    }
  },
  created() {
    reqSongById({id: this.$route.params.id}).then(res => {
      this.songData = res.object
    })
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    },
    token() {
      return this.$store.state.user.token
    }
  }
}
</script>

<style lang="less" scoped>
.song {
  .content {
    display: flex;
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 70px;
    .content-l {
      flex: 1;
      display: flex;
      padding: 30px;
      border-left: 1px solid #d3d3d3;
      border-right: 1px solid #d3d3d3;

      .content-l-l {
        position: relative;
        width: 226px;

        img {
          margin: 32px;
          width: 135px;
          height: 135px;
        }

        span {
          display: block;
          position: absolute;
          width: 206px;
          height: 205px;
          top: -4px;
          left: -4px;
          background: url(../../assets/images/coverall.png) no-repeat -140px -580px;
        }
      }

      .content-l-r {
        flex: 1;

        .top {
          i {
            display: inline-block;
            width: 54px;
            height: 24px;
            vertical-align: middle;
            background: url(../../assets/images/icon.png) no-repeat 0 -463px;
          }

          .name {
            display: inline-block;
            margin-left: 7px;
            vertical-align: middle;
            font-size: 24px;
          }
        }

        .singer,
        .album {
          margin: 10px 0;

          span {
            color: #999;
          }

          a {
            color: #0c73c2;

            &:hover {
              color: #0c73c2 !important;
              text-decoration: underline !important;
            }
          }
        }

        .a-list {
          overflow: hidden;

          .one {
            float: left;
            padding: 0 5px 0 0;
            width: 61px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            color: #fff !important;
            background: url(../../assets/images/button2.png) no-repeat right -428px;

            span {
              display: inline-block;
              padding: 0 7px 0 8px;
              width: 46px;
              height: 31px;
              line-height: 31px;
              background: url(../../assets/images/button2.png) no-repeat 0 -387px;

              i {
                float: left;
                margin: 6px 2px 2px 0;
                width: 20px;
                height: 18px;
                background: url(../../assets/images/button2.png) no-repeat 0 -1622px;
              }
            }
          }

          .two {
            float: left;
            padding: 0 5px 0 0;
            margin-left: -3px;
            margin-right: 5px;
            width: 31px;
            height: 31px;
            background: url(../../assets/images/button2.png) no-repeat 0 -1588px;
          }

          .three,
          .four,
          .five,
          .six {
            float: left;
            margin-right: 6px;
            padding-right: 5px;
            min-width: 54px;
            height: 31px;

            span {
              display: inline-block;
              padding: 0 3px 0 28px;
              min-width: 23px;
              height: 31px;
              line-height: 31px;
              color: #333;
            }
          }

          .three {
            background: url(../../assets/images/button2.png) no-repeat right -1020px;

            span {
              background: url(../../assets/images/button2.png) no-repeat 0 -977px;
            }
          }

          .four {
            background: url(../../assets/images/button2.png) no-repeat right -1020px;

            span {
              background: url(../../assets/images/button2.png) no-repeat 0 -1225px;
            }
          }

          .five {
            background: url(../../assets/images/button2.png) no-repeat right -1020px;

            span {
              background: url(../../assets/images/button2.png) no-repeat 0 -2761px;
            }
          }

          .six {
            background: url(../../assets/images/button2.png) no-repeat right -1020px;

            span {
              background: url(../../assets/images/button2.png) no-repeat 0 -1465px;
            }
          }
        }

        .lyric {
          margin-top: 30px;

          .crl {
            margin-top: 5px;

            a {
              color: #0c73c2;

              i {
                display: inline-block;
                margin-left: 2px;
                width: 11px;
                height: 8px;
                vertical-align: middle;
                background: url(../../assets/images/icon.png) no-repeat -65px -520px;
              }

              &:hover {
                color: #0c73c2 !important;
              }
            }
          }
        }
      }
    }
  }

  .songPlay {
    audio {
      width: 100%;
      position: fixed;
      bottom: 0;
    }
  }
}
</style>